{extend name="base"/}
{block name="resources"}
<link rel="stylesheet" href="STATIC_EXT/color_picker/css/colorpicker.css" />
<link rel="stylesheet" href="STATIC_EXT/diyview/css/member_icon/iconfont.css" />
<link rel="stylesheet" href="STATIC_EXT/diyview/css/member_index.css" />
<link rel="stylesheet" href="STATIC_EXT/diyview/css/diyview.css" />
<style>
	.ns-body-content {
		padding-left: 0 !important;
	}
</style>
{/block}
{block name="main"}
<div id="diyView">

	<div class="preview-wrap">

		<div class="preview-restore-wrap">
			<div class="dv-wrap">
				<div class='diy-view-wrap layui-form'>

					<div class="preview-head">
						<span>会员中心</span>
					</div>

					<div class="preview-block">

						<!-- 会员信息 -->
						<div @click="currentIndex=0" class="draggable-element" :class="{selected: currentIndex == 0}">
							<div class="member-info">
								<div class="member-info-wrap">
									<div class="member-info-bg" :style="{backgroundColor:data.bgColor}"></div>
									<div class="preview-draggable" :style="{backgroundColor:data.bgColor,backgroundImage: data.bgImg ?  'url(' + changeImgUrl(data.bgImg) + ')' : ''}">
										<div class="info">
											<div class="info-img">
												<img src="STATIC_EXT/diyview/img/member_index/member_head.png" alt="">
											</div>
											<div class="info-content">
												<span class="info-name" :style="{color:data.textColor}">会员昵称</span>
												<span class="info-grad">会员等级</span>
											</div>
											<div class="info-set">
												<i class="iconfont icon-shezhi" :style="{color:data.textColor}"></i>
											</div>
										</div>
										<div class="wallet" :style="{color:data.textColor}">
											<div class="wallet-item wallet-balance">
												<span>0.00</span>
												<span>余额</span>
											</div>
											<span class="wallet-item-border"></span>
											<div class="wallet-item wallet-integral">
												<span>0</span>
												<span>积分</span>
											</div>
											<span class="wallet-item-border"></span>
											<div class="wallet-item wallet-discount-coupon">
												<span>0</span>
												<span>优惠券</span>
											</div>
										</div>
									</div>
								</div>

								<div class="edit-attribute" v-show="currentIndex == 0">
									<div class="attr-wrap">
										<div class="restore-wrap">
											<h2 class="attr-title">会员信息</h2>

											<div class="layui-form-item">
												<label class="layui-form-label sm">页面风格</label>
												<div class="layui-input-block">
													<template v-for="(item,index) in topStyleList">
														<div @click="data.topStyle=item.value" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (data.topStyle==item.value) }">
															<i class="layui-anim layui-icon">&#xe63f;</i>
															<div>{{item.text}}</div>
														</div>
													</template>
												</div>
												<div class="ns-word-aux ns-diy-word-aux">系统风格跟随商城风格进行整体变化</div>
											</div>
											<template v-if="data.topStyle == topStyleList[1].value">
												<div class="diy-text-color">
													<color v-bind:data="{ field: 'textColor', label : '文字颜色', value:data.textColor }">
													</color>
												</div>

												<div class="layui-form-item">
													<label class="layui-form-label sm">背景颜色</label>
													<div class="layui-input-block color-list">
														<div class="colorSelector" v-for="(item,index) in bgColorList" :key="index" :class="{'selected':data.bgColor==item}">
															<div :style="{background: item}" @click="data.bgColor=item">
															</div>
														</div>
														<div class="diy-color-wrap">
															<color v-bind:data="{ field : 'bgColor', label : '', value:data.bgColor }" :class="{'selected':bgColorList.indexOf(data.bgColor)==-1}">
															</color>
														</div>
													</div>
												</div>

												<div class="layui-form-item">
													<label class="layui-form-label sm">背景图片</label>
													<div class="layui-input-block ns-img-upload">
														<img-sec-upload :data="{data:data,field:'bgImg'}">
														</img-sec-upload>
													</div>
													<div class="ns-word-aux ns-diy-word-aux">建议使用半透明图片，尺寸：750px * 332px
													</div>
												</div>
											</template>

										</div>
									</div>
								</div>

							</div>
						</div>

						<!-- 订单信息 -->
						<div class="draggable-element disabled">
							<div class="order-info">
								<div class="preview-draggable">
									<div class="order-info-title">
										<span class="all-order">我的订单</span>
										<span class="check-order">查看全部订单<i class="iconfont icon-right"></i></span>
									</div>
									<ul class="order-info-content">
										<li class="content-item">
											<div class="content-item-icon">
												<img src="{:img('upload/uniapp/member/index/order/default_order_1.png')}" alt="">
											</div>
											<span>待付款</span>
										</li>
										<li class="content-item">
											<div class="content-item-icon">
												<img src="{:img('upload/uniapp/member/index/order/default_order_2.png')}" alt="">
											</div>
											<span>待配送</span>
										</li>
										<li class="content-item">
											<div class="content-item-icon">
												<img src="{:img('upload/uniapp/member/index/order/default_order_3.png')}" alt="">
											</div>
											<span>待提货</span>
										</li>
										<li class="content-item">
											<div class="content-item-icon">
												<img src="{:img('upload/uniapp/member/index/order/default_order_4.png')}" alt="">
											</div>
											<span>退款/售后</span>
										</li>
									</ul>
								</div>
							</div>
						</div>

						<!-- 自提点 -->
						<div class="draggable-element">
							<div class="pick-up-point">
								<div class="preview-draggable">
									<div class="point-wrap">
										<img src="SHOP_IMG/diy/bg.png" />

										<div class="point-wrap-con">
											<div class="point-wrap-title">
												<span>我的当前自提点</span>
												<span>切换自提点<i class="iconfont icon-right"></i></span>
											</div>

											<div class="point-wrap-block">
												<div class="point-title">
													<span>二七区绿城社区团购点</span>
													<span><i class="iconfont iconweizhi1"></i>据您0.5km</span>
												</div>
												<div class="point-num">
													<div><span>粉丝数：</span><span class="num">25</span></div>
													<div><span>购买指数：</span><span class="num">80</span></div>
												</div>
												<div class="point-address">地址：山西省太原市小店区科宇信息产业大厦</div>
												<div class="point-ensure">
													<i class="iconfont iconbaozheng"></i>如果您购买的商品有任何问题，请直接与购买的门店联系！门店将为您处理，<span>让您售后无忧！</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="draggable-element">
							<div class="help-info">
								<div class="preview-draggable">
									<div class="help-wrap">
										<img src="SHOP_IMG/diy/custom.png" />
										<span>帮帮忙热线</span>
										<div>
											<p>如果您找不到购物的提货门店，</p>
											<p><span>请致电</span><i class="iconfont icondianhua2"></i><span>4008867993</span></p>
										</div>
									</div>
								</div>
							</div>
						</div>


						<!-- 常用工具 -->
						<div @click="currentIndex=3" class="draggable-element" :class="{selected: currentIndex == 3}">
							<div class="common-tools">
								<div class="preview-draggable">
									<div class="tools-title">
										<span>常用工具</span>
									</div>
									<ul class="tools-list" :class="[data.menuStyle, parseInt(data.insertGap) ? 'insert-gap' : '']">
										<!--		                                data.menuList-->
										<li class="tools-item" v-for="item in handleMenuList" v-if="item.isShow == 1">
											<div class="tools-item-icon">
												<img :src="changeImgUrl(item.img)" alt="">
											</div>
											<span>{{item.text}}</span>
											<i class="iconfont icon-right" v-if="data.menuStyle=='list'"></i>
										</li>
									</ul>
								</div>

								<div class="edit-attribute" style="display: none" v-show="currentIndex == 3">
									<div class="attr-wrap">
										<div class="restore-wrap">
											<h2 class="attr-title">常用工具</h2>

											<div class="layui-form-item">
												<label class="layui-form-label sm">样式</label>
												<div class="layui-input-block">
													<template v-for="(item,index) in menuStyleList">
														<div @click="data.menuStyle=item.value" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (data.menuStyle==item.value) }">
															<i class="layui-anim layui-icon">&#xe63f;</i>
															<div>{{item.text}}</div>
														</div>
													</template>
												</div>
											</div>

											<div class="layui-form-item" v-show="data.menuStyle == menuStyleList[1].value">
												<label class="layui-form-label sm">插入间隔</label>
												<div class="layui-input-block">
													<div class="layui-unselect layui-form-switch" @click="data.insertGap=data.insertGap == 1 ? 0 : 1" :class="{ 'layui-form-onswitch' : (data.insertGap == 1) }">
														<em></em>
														<i></i>
													</div>
												</div>
											</div>

											<div class="menu-list">
												<ul>
													<li v-for="(item,index) in data.menuList" :data-index="index" :data-sort="index">
														<div class="layui-unselect layui-form-checkbox" lay-skin="primary" :class="{ 'layui-form-checked' : (item.isShow == 1) }"
														 @click="item.isShow= item.isShow == 1 ? 0 : 1">
															<i class="layui-icon layui-icon-ok"></i>
														</div>
														<div class="info-wrap">
															<span>{{item.text}}</span>
															<span v-if="item.remark" class="tips">（{{item.remark}}）</span>
														</div>
														<i class="iconfont icon-delete" title="删除" @click="deleteMenu(index)" v-if="item.isSystem == 0"></i>
														<i class="iconfont icon-bianji" title="编辑" @click="editMenu(index)"></i>
													</li>
												</ul>
												<button class="layui-btn layui-btn-primary sm" @click="addMenu()">添加菜单</button>
											</div>

										</div>
									</div>
								</div>

							</div>
						</div>
						<div class="footer-img">
							<img src="SHOP_IMG/logo_footer.png">
						</div>
						<div class="service-body">
							<div>
								<img src="SHOP_IMG/diy/icon1.png" />
								<span>便宜有好货</span>
							</div>
							<div>
								<img src="SHOP_IMG/diy/icon2.png" />
								<span>次日16:00自提</span>
							</div>
							<div>
								<img src="SHOP_IMG/diy/icon3.png" />
								<span>售后无忧</span>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>

	<div class="custom-save">
		<button class="layui-btn ns-bg-color" @click="save">保存</button>
	</div>

</div>
{if condition="!empty($info)"}
<input type="hidden" id="info" value='{$info}' />
{/if}
<script type="text/html" id="editMenuHtml">
	<div class="layui-form">

		<div class="layui-form-item">
			<label class="layui-form-label sm">菜单名称：</label>
			<div class="layui-input-block">
				<input type="text" name="menu_text" value="{{d.text ? d.text : ''}}" lay-verify="required" placeholder="请输入菜单名称" maxlength="10" class="layui-input ns-len-short">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label sm">菜单图标：</label>
			<div class="layui-input-block img-upload">
				<div class="upload-img-block">
					<div class="upload-img-box" id="menuImgUpload">
						{{# if(d.img){ }}
						<img src="{{ns.img(d.img)}}" />
						{{# }else{ }}
						<div class="ns-upload-default">
							<img src="SHOP_IMG/upload_img.png" />
						</div>
						{{# } }}
					</div>
					<input type="hidden" name="menu_img" value="{{d.img ? d.img : ''}}"/>
					{{# if(d.img){ }}
					<i class="del show">x</i>
					{{# }else{ }}
					<i class="del">x</i>
					{{# } }}
				</div>
			</div>

			<div class="ns-word-aux sm">
				<p>建议尺寸100px*100px</p>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label sm">跳转链接</label>
			<div class="layui-input-block">
				{{# if(d.link && d.link.title){ }}
				<span class="js-select-link-text">{{d.link.title}}</span>
				{{# }else{ }}
				<span class="js-select-link-text" style="display: none;"></span>
				{{# } }}
				<button class="layui-btn layui-btn-primary sm" onclick="selectLink({{d.i}})">选择</button>
			</div>
		</div>

	</div>

</script>
{/block}
{block name="script"}
<script>
	var post = '{$app_module}';
	var height = $(window).height(); // 自适应全屏，调整高度
	var commonHeight = height - 214;
	$(".preview-wrap .preview-restore-wrap .dv-wrap").css("height", (commonHeight) + "px");
	$(".edit-attribute .attr-wrap").css("height", (commonHeight) + "px");
	$(".preview-block").css("min-height", (commonHeight - 120) + "px");

	var form, laytpl;
	layui.use(['form', 'laytpl'], function() {
		form = layui.form;
		laytpl = layui.laytpl;
	});
</script>
<script src="STATIC_JS/vue.js"></script>
<script src="STATIC_EXT/color_picker/js/colorpicker.js"></script>
<script src="STATIC_EXT/colorPicker/js/colorpicker.js"></script>
<script src="STATIC_EXT/jquerycolorpicker/js/paigusu.min.js"></script>
<script src="STATIC_EXT/diyview/js/ddsort.js"></script>
<script src="STATIC_EXT/diyview/js/components.js"></script>
<script src="STATIC_EXT/diyview/js/member_index.js"></script>
{/block}
